<template>
	<view class="user" :class="[isDark?'dark':'', $store.state.AppStyle]" :style="{'background-color':isDark?'#1c1c1c':'#f6f6f6','min-height':isDark?'100vh':'auto'}">
		<view class="header" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar" :class="isDark?'dark':'bg-white'" :style="{'height': CustomBar + 'px','padding-top':StatusBar + 'px','background-color':isDark?'#1c1c1c':'#ffffff'}">
				<view class="action" @tap="back">
					<text class="cuIcon-back"></text>
				</view>
				<view class="content text-bold" :style="[{top:StatusBar + 'px'}]">
					<block v-if="postType=='add'">
						<block v-if="type==0">
							{{$t('space.post.releasenewupdate')}}
						</block>
						<block v-if="type==2">
							{{$t('space.post.forwarddynamic')}}
						</block>
						<block v-if="type==4">
							{{$t('space.post.postvideoupdate')}}
						</block>
					</block>
					<block v-else>
						{{$t('space.post.editdynamic')}}
					</block>
				</view>
				<view class="action">
					<!--  #ifdef H5 || APP-PLUS -->
					<block v-if="postType=='add'">
						<button class="cu-btn round bg-gradual-orange" @tap="addSpace()">{{$t('global.release')}}</button>
					</block>
					<block v-else>
						<button class="cu-btn round bg-gradual-orange" @tap="editSpace()">{{$t('global.save')}}</button>
					</block>
					<!--  #endif -->
				</view>
			</view>
		</view>
		<view :style="[{padding:NavBar + 'px 0px 0px 0px'}]"></view>
		
		<!-- 主内容区域 -->
		<view class="post-container">
			<!-- 文本输入区域 -->
			<view class="text-input-section">
				<textarea 
					class="post-textarea" 
					maxlength="-1" 
					v-model="text" 
					:placeholder="type==2 ? $t('space.post.forwardthought') : type==4 ? $t('space.post.tellthisvideo') : $t('space.post.sharethisidea')"
					auto-height
					:maxlength="1000">
				</textarea>
				
				<!-- 表情和工具栏 -->
				<!--  #ifdef H5 || APP-PLUS -->
				<view class="post-toolbar">
					<view class="toolbar-left">
						<view class="emoji-btn" @tap="OwO">
							<text class="cuIcon-emoji"></text>
							<text class="emoji-text">{{$t('space.post.emote')}}</text>
						</view>
					</view>
					<view class="toolbar-right">
						<view class="privacy-toggle">
							<text class="privacy-label">{{$t('space.post.oneselfonly')}}</text>
							<switch 
								class="privacy-switch" 
								@change="OnlyMe" 
								:checked="onlyMe"
								color="#3cc9a4">
							</switch>
						</view>
					</view>
				</view>
				<!--  #endif -->
			</view>

			<!-- 表情面板 -->
			<!--  #ifdef H5 || APP-PLUS -->
			<view class="emoji-panel" v-if="isOwO">
				<view class="emoji-types">
					<view class="emoji-type-btn" 
						v-for="(type, index) in emojiTypes" 
						:key="index"
						:class="OwOtype == type.key ? 'active' : ''"
						@tap="toOwO(type.key)">
						{{$type.name}}
					</view>
				</view>
				<scroll-view class="emoji-grid" scroll-y>
					<view class="emoji-list">
						<view class="emoji-item" 
							v-for="(item, index) in owoList" 
							:key="index"
							@tap="setOwO(item)">
							<image :src="'/'+item.icon" mode="aspectFill"></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<!--  #endif -->

			<!-- 转发内容显示 -->
			<view class="forward-content" v-if="type==2 && forwardJson!=null">
				<view class="forward-card">
					<view class="forward-header">
						<text class="forward-label">{{$t('space.post.forwardcontext')}}</text>
					</view>
					<view class="forward-body">
						<text class="forward-user">@{{forwardJson.userJson.name}}:</text>
						<text class="forward-text">{{forwardJson.text}}</text>
					</view>
				</view>
			</view>

			<!-- 图片上传区域 (type=0) -->
			<view class="media-section" v-if="type==0">
				<view class="section-title" v-if="picList.length > 0">
					<text>{{$t('space.post.picture')}} ({{picList.length}}/9)</text>
				</view>
				<view class="image-upload-area">
					<view class="image-grid">
						<view class="image-item" 
							v-for="(item, index) in picList" 
							:key="index"
							:style="'background-image:url('+item+');'">
							<view class="image-delete" @tap="picClose(item)">
								<text class="cuIcon-close"></text>
							</view>
						</view>
						<view class="upload-placeholder" v-if="picList.length < 9" @tap="upload">
							<text class="cuIcon-add"></text>
							<text class="upload-text">{{$t('space.post.addpicture')}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 视频上传区域 (type=4) -->
			<view class="media-section" v-if="type==4">
				<view class="section-title">
					<text>{{$t('space.post.video')}}</text>
				</view>
				<view class="video-upload-area">
					<view class="video-placeholder" v-if="pic == ''" @tap="uploadVideo">
						<text class="cuIcon-video"></text>
						<text class="upload-text">{{$t('space.post.addvideo')}}</text>
						<text class="upload-hint">{{$t('space.post.supportmp4')}}</text>
					</view>
					<view class="video-preview" v-if="pic != ''">
						<video :src="pic" class="preview-video"></video>
						<view class="video-delete" @tap="pic=''">
							<text class="cuIcon-close"></text>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!--  #ifdef MP -->
		<view class="mp-privacy-section">
			<view class="privacy-toggle">
				<text class="privacy-label">{{$t('space.post.oneselfonly')}}</text>
				<switch 
					class="privacy-switch" 
					@change="OnlyMe" 
					:checked="onlyMe"
					color="#3cc9a4">
				</switch>
			</view>
		</view>
		<!--  #endif -->
		<view class="cu-modal" :class="modalName=='kaptcha'?'show':''">
			<view class="cu-dialog kaptcha-dialog">
				<view class="cu-bar justify-end" :class="isDark?'dark':'bg-white'" :style="{'background-color':isDark?'#1c1c1c':'#ffffff'}">
					<view class="content">{{$t('global.optverificat')}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close"></text>
					</view>
				</view>
				<view class="kaptcha-form">
					<view class="kaptcha-image">
						<image :src="kaptchaUrl" mode="widthFix" @tap="reloadCode()"></image>
					</view>
					<view class="kaptcha-input">
						<input name="input" v-model="verifyCode" placeholder="$t('global.plsincaptcha')"/>
						<view class="cu-btn bg-blue" @tap="addSpace">{{$t('common.sure')}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { localStorage } from '../../js_sdk/mp-storage/mp-storage/index.js'
	import darkModeMixin from '@/utils/darkModeMixin.js'
	import {
		usePermissions
	} from "@/js_sdk/z-app-permission/z-app-permission.js"
	import permision from "@/js_sdk/wa-permission/permission.js"
	// #ifdef APP-PLUS
	import owo from '../../static/app-plus/owo/OwO.js'
	// #endif
	// #ifdef H5
	import owo from '../../static/h5/owo/OwO.js'
	// #endif
	// #ifdef MP
	var owo = [];
	// #endif
	export default {
		mixins: [darkModeMixin],
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				NavBar:this.StatusBar +  this.CustomBar,
				AppStyle:this.$store.state.AppStyle,
				
				id:0,
				postType:"add",
				type:0,
				text:"",
				toid:0,
				pic:"",
				picList:[],
				token:"",
				currencyName:"",
				
				forwardJson:null,
				contentJson:null,
				postJson:null,
				shopJson:null,
				
				isOwO:false,
				owo:owo,
				owoList:[],
				OwOtype:"paopao",
				emojiTypes: [
					{ key: 'paopao', name: $t('global.owopaopao') },
					{ key: 'adai', name: $t('global.adai') },
					{ key: 'alu', name: $t('global.owoalu') },
					{ key: 'quyinniang', name: $t('global.owoquyinniang') }
				],
				modalName:null,
				kaptchaUrl:"",
				verifyCode:"",
				verifyLevel:0,
				onlyMe:false
			}
		},
		onPullDownRefresh(){
			
		},
		onHide() {
			localStorage.removeItem('getuid')
		},
		onShow(){
			var that = this;
			// #ifdef APP-PLUS
			
			//plus.navigator.setStatusBarStyle("dark")
			// #endif
			if(localStorage.getItem('token')){
				that.token = localStorage.getItem('token');
			}
			
		},
		onLoad(res) {
			var that = this;
			// #ifdef APP-PLUS || MP
			that.NavBar = that.CustomBar;
			// #endif
			// #ifdef APP-PLUS || H5
			that.owoList = that.owo.data.paopao.container;
			// #endif
			if(res.type){
				that.type = res.type;
			}
			if(res.toid){
				that.toid = res.toid;
				if(that.type==6){
					that.getPostInfo();
				}else{
					that.getInfo()
				}
			}
			if(res.postType){
				that.postType = res.postType;
			}
			if(res.id){
				that.id = res.id;
				if(that.postType=='add'){
					that.getForwardInfo(that.id);
				}else{
					that.getSpaceInfo();
				}
			}
			that.kaptchaUrl = that.$API.getKaptcha();
			that.getConfig();
		},
		
		mounted() {
			var that = this;
			that.getleiji()
		},
		
		methods: {
			getleiji() {
				var that = this;
				uni.request({
					url: that.$API.SPset(),
					method: 'GET',
					dataType: "json",
					success(res) {
						that.currencyName = res.data.assetsname;
					},
					fail(error) {
						
					}
		
				})
			},
			back(){
				uni.navigateBack({
					delta: 1
				});
			},
			OnlyMe(e) {
				this.onlyMe = e.detail.value
			},
			reloadCode(){
				var that = this;
				var kaptchaUrl = that.$API.getKaptcha();
				var num=Math.ceil(Math.random()*10);
				kaptchaUrl += "?"+num;
				that.kaptchaUrl = kaptchaUrl;
			},
			getConfig() {
				var that = this;
				if(localStorage.getItem('AppInfo')){
					try{
						var AppInfo = JSON.parse(localStorage.getItem('AppInfo'));
						that.verifyLevel = AppInfo.verifyLevel;
					}catch(e){
						
					}
				}
			},
			hideModal(e) {
				this.modalName = null
			},
			toOwO(text){
				var that = this;
				that.OwOtype = text;
				if(text=="paopao"){
					that.owoList = that.owo.data.paopao.container;
				}
				if(text=="adai"){
					that.owoList = that.owo.data.adai.container;
				}
				if(text=="alu"){
					that.owoList = that.owo.data.alu.container;
				}
				if(text=="quyinniang"){
					that.owoList = that.owo.data.quyinniang.container;
				}
			},
			setOwO(data){
				var that = this;
				var text = data.data;
				that.text+=text;
				that.isOwO = false;
			},
			OwO(){
				var that = this;
				that.isOwO = !that.isOwO;
			},
			getForwardInfo(toid){
				var that = this;
				var token = "";
				if(localStorage.getItem('userinfo')){
					var userInfo = JSON.parse(localStorage.getItem('userinfo'));
					token=userInfo.token;
				}
				var data = {
					"id":that.id,
					"token":token
				}
				that.$Net.request({
					url: that.$API.spaceInfo(),
					data:data,
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						that.isLoading=1;
						if(res.data.code==1){
							that.forwardJson = res.data.data;
							that.toid = res.data.data.id;
						}
					},
					fail: function(res) {
						that.isLoading=1;
					}
				});
				
			},
			replaceAll(string, search, replace) {
			  return string.split(search).join(replace);
			},
			getSpaceInfo(){
				var that = this;
				var token = "";
				if(localStorage.getItem('userinfo')){
					var userInfo = JSON.parse(localStorage.getItem('userinfo'));
					token=userInfo.token;
				}
				var data = {
					"id":that.id,
					"token":token
				}
				that.$Net.request({
					url: that.$API.spaceInfo(),
					data:data,
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						that.isLoading=1;
						if(res.data.code==1){
							that.id = res.data.data.id;
							that.type = res.data.data.type;
							
							if(res.data.data.onlyMe==1){
								that.onlyMe = true;
							}
							var text = res.data.data.text;
							text = that.replaceAll(text,"/r/n","\n");
							text = that.replaceAll(text,"||rn||","\n");
							that.text = text;
							that.toid = res.data.data.toid;
							if(res.data.data.pic){
								that.pic = res.data.data.pic;
								if(that.type==0){
									if(that.pic.indexOf("||")!=-1){
										that.picList = that.pic.split("||");
									}else{
										that.picList = that.picList.push(that.pic);
									}
								}
							}
							if(that.type==1){
								that.contentJson = res.data.data.contentJson;
							}
							if(that.type==5){
								that.shopJson = res.data.data.shopJson;
							}
							if(that.type==6){
								that.postJson = res.data.data.postJson;
							}
							if(that.type==2){
								that.getForwardInfo(that.toid);
							}
						}
					},
					fail: function(res) {
						that.isLoading=1;
					}
				});
			},
			getInfo(){
				var that = this;
				var data = {
					"key":that.toid,
					"isMd":0,
				}
				
				that.$Net.request({
					url: that.$API.getContentsInfo(),
					data:data,
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						uni.stopPullDownRefresh();
						if(res.data.title){
							that.contentJson = res.data;
						}
					},
					fail: function(res) {
						uni.stopPullDownRefresh();
					}
				})
			},
			getPostInfo(){
				var that = this;
				var data = {
					"id":that.toid,
				}
				
				that.$Net.request({
					url: that.$API.postInfoForum(),
					data:data,
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method: "post",
					dataType: 'json',
					success: function(res) {
						uni.stopPullDownRefresh();
						if(res.data.code==1){
							that.postJson = res.data.data;
						}
					},
					fail: function(res) {
						uni.stopPullDownRefresh();
					}
				})
			},
			addSpace(){
				var that = this;
				if(that.token==""){
					uni.showToast({
					    title: that.$t('common.plslogin'),
						icon:'none',
						duration: 1000,
						position:'bottom',
					});
					
					var timer = setTimeout(function() {
						uni.navigateTo({
						    url: '/pages/user/login'
						});
						clearTimeout('timer')
					}, 1000)
					return false
				}
				if(that.type==2){
					if (that.text == "") {
						text = that.$t('space.post.relaydynamic')
					}
				}
				if (that.text == "") {
					uni.showToast({
					    title: that.$t('space.post.plsdynamictxt'),
						icon:'none',
						duration: 1000,
						position:'bottom',
					});
					return false
				}
				var text  = that.text;
				if(that.type==0){
					var picList = that.picList;
					var pic = "";
					for(var i in picList){
						if(i==0){
							pic += picList[i];
						}else{
							pic += "||"+picList[i];
						}
					}
					that.pic = pic;
				}
				if(that.type==4){
					if(that.pic==""){
						uni.showToast({
						    title: that.$t('space.post.plsuploadvideo'),
							icon:'none',
							duration: 1000,
							position:'bottom',
						});
						return false;
					}
				}
				text = text.replace(/\r\n/g,"||rn||");
				text = text.replace(/\n/g,"||rn||");
				
				if(that.verifyLevel>1){
					if (that.verifyCode == "") {
						that.modalName = 'kaptcha'
						return false
					}
				}
				var data = {
					"type":that.type,
					"text":text,
					"toid":that.toid,
					"pic":that.pic,
					"token":that.token,
					'verifyCode':that.verifyCode
				}
				if(that.onlyMe){
					data.onlyMe = 1;
				}
				uni.showLoading({
					title: that.$t('common.loadmore')
				});
				that.$Net.request({
					
					url: that.$API.addSpace(),
					data:that.$API.removeObjectEmptyKey(data),
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						that.modalName = null;
						that.verifyCode = "";
						setTimeout(function () {
							uni.hideLoading();
						}, 1000);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if(res.data.code==1){
							if(localStorage.getItem('userinfo')){
								var userInfo = JSON.parse(localStorage.getItem('userinfo'));
								var uid=userInfo.uid;
							}
							uni.request({
								url:that.$API.SPgetdongtai(),
								method:'GET',
								data:{
									uid:uid,
								},
								dataType:"json",
								success(res) {
								},
								fail() {
									setTimeout(function () {
										uni.hideLoading();
									}, 1000);
									uni.showToast({
										title: that.$t('common.networkfail'),
										icon: 'none'
									})
								}
							})
							// 设置动态发布成功标记，通知相关页面刷新
							localStorage.setItem('needRefreshSpace', 'true');
							// 设置首页刷新标记
							localStorage.setItem('needRefreshHome', 'true');
							// 设置发现页刷新标记
							localStorage.setItem('needRefreshFind', 'true');
							
							var timer = setTimeout(function() {
								that.back();
							}, 1000)
							
						}
					},
					fail: function(res) {
						that.modalName = null;
						that.verifyCode = "";
						setTimeout(function () {
							uni.hideLoading();
						}, 1000);
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						})
						uni.stopPullDownRefresh()
					}
				})
			},
			editSpace(){
				var that = this;
				if(that.token==""){
					uni.showToast({
					    title: that.$t('common.plslogin'),
						icon:'none',
						duration: 1000,
						position:'bottom',
					});
					
					var timer = setTimeout(function() {
						uni.navigateTo({
						    url: '/pages/user/login'
						});
						clearTimeout('timer')
					}, 1000)
					return false
				}
				if(that.type==2){
					if (that.text == "") {
						text = that.$t('space.post.relaydynamic')
					}
				}
				if (that.text == "") {
					uni.showToast({
					    title: that.$t('space.post.plsdynamictxt'),
						icon:'none',
						duration: 1000,
						position:'bottom',
					});
					return false
				}
				var text  = that.text;
				if(that.type==0){
					var picList = that.picList;
					var pic = "";
					for(var i in picList){
						if(i==0){
							pic += picList[i];
						}else{
							pic += "||"+picList[i];
						}
					}
					that.pic = pic;
				}
				if(that.type==4){
					if(that.pic==""){
						uni.showToast({
						    title: that.$t('space.post.plsuploadvideo'),
							icon:'none',
							duration: 1000,
							position:'bottom',
						});
						return false;
					}
				}
				text = text.replace(/\r\n/g,"||rn||");
				text = text.replace(/\n/g,"||rn||");
				var data = {
					id:that.id,
					type:that.type,
					text:text,
					toid:that.toid,
					pic:that.pic,
					token:that.token
				}
				if(that.onlyMe){
					data.onlyMe = 1;
				}
				uni.showLoading({
					title: that.$t('common.loadmore')
				});
				that.$Net.request({
					
					url: that.$API.editSpace(),
					data:that.$API.removeObjectEmptyKey(data),
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						setTimeout(function () {
							uni.hideLoading();
						}, 1000);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if(res.data.code==1){
							var timer = setTimeout(function() {
								that.back();
							}, 1000)
							
						}
					},
					fail: function(res) {
						setTimeout(function () {
							uni.hideLoading();
						}, 1000);
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						})
						uni.stopPullDownRefresh()
					}
				})
			},
			checkAndRequestReadStoragePermission() {
				var that = this
				// #ifdef APP-PLUS
				let systemType = uni.getSystemInfoSync().platform;
			
				if (systemType === 'android') {
					let compat = plus.android.importClass('androidx.core.content.ContextCompat')
					let context = plus.android.runtimeMainActivity()
					let permission = 'android.permission.READ_EXTERNAL_STORAGE' 
					let result = compat.checkSelfPermission(context, permission) //result 返回0则表示已授权该权限，为-1则未授权
					if (result === 0) {
						
					} else {
						usePermissions().requestAppPermission({
							title: that.$t('space.post.savepermissapply'),
							content: that.$t('space.post.getalbumpermiss'),
							permissionID: 'READ_STORAGE' // 权限ID, 安卓上可以是'android.permission.READ_EXTERNAL_STORAGE'
						}).then(res => {
							// 用户同意权限申请
							if (res === 1) {
								// 在这里可以执行后续操作，例如访问存储或相册
							} else {
								// 权限申请失败，处理拒绝情况
							}
						}).catch(err => {
							console.error('权限申请过程中发生错误: ', err);
						});
						
						 permision.requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE')
			
					}
			
				}
			// #endif
			},
			upload(){
				let that = this				
				uni.chooseImage({
					count: 9,  // 最多可以选择的图片张数，默认9
					sizeType:['original'],
					sourceType: ['album', 'camera'], 
				    success: function (res) {						
						uni.showLoading({
							title: that.$t('common.loadmore')
						});
						const tempFilePaths = res.tempFilePaths;
						for(let i = 0;i < tempFilePaths.length; i++) {
							const uploadTask = uni.uploadFile({
							  url : that.$API.upload(),
							  filePath: tempFilePaths[i],
							  name: 'file',
							  formData: {
							   'token': that.token
							  },
							  success: function (uploadFileRes) {
								  let count = 0;
								  count++;
								  if(count==tempFilePaths.length){
									  setTimeout(function () {
									  	uni.hideLoading();
									  }, 1000);
								  }
									var data = JSON.parse(uploadFileRes.data);
									//var data = uploadFileRes.data;
									uni.showToast({
										title: data.msg,
										icon: 'none'
									})
									if(data.code==1){
									   var url = data.data.url;
									   that.picList.push(url);
									}
								},fail:function(){
									setTimeout(function () {
										uni.hideLoading();
									}, 1000);
								}
								
							   
							});
						}
					}
				})
			},
			uploadVideo(){
				var that = this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					compressed:false,
					success: (responent) => {
						uni.showLoading({
							title: that.$t('common.loadmore')
						});
						let videoFile = responent.tempFilePath;
						const uploadTask = uni.uploadFile({
						  url : that.$API.upload(),
						  filePath:videoFile,
						  name: 'file',
						  formData: {
						   'token': that.token
						  },
						  success: function (uploadFileRes) {
							  setTimeout(function () {
							  	uni.hideLoading();
							  }, 1000);
								var data = JSON.parse(uploadFileRes.data);
								//var data = uploadFileRes.data;
								uni.showToast({
									title: data.msg,
									icon: 'none'
								})
								if(data.code==1){
								   var url = data.data.url;
								   that.pic = url;
								}
							},fail:function(){
								uni.showToast({
									title: that.$t('common.networkerror'),
									icon: 'none'
								})
								setTimeout(function () {
									uni.hideLoading();
								}, 1000);
							}
							
						   
						});
					}
				})
			},
			picClose(item){
				var that = this;
				var picList = that.picList;
				var list = [];
				for(var i in picList){
					if(picList[i]!=item){
						list.push(picList[i]);
					}
				}
				that.picList = list;
			}
		}
	}
</script>

<style lang="scss" scoped>
page {
	background-color: #f6f6f6;
}

/* 主容器 */
.post-container {
	padding: 0 20upx 120upx 20upx;
	min-height: calc(100vh - 100upx);
}

/* 文本输入区域 */
.text-input-section {
	background: #ffffff;
	border-radius: 20upx;
	margin-bottom: 20upx;
	overflow: hidden;
}

.post-textarea {
	width: 100%;
	min-height: 300upx;
	padding: 30upx;
	font-size: 32upx;
	line-height: 1.6;
	color: #333;
	background: transparent;
	border: none;
	outline: none;
	resize: none;
	word-wrap: break-word;
	box-sizing: border-box;
}

.post-textarea::placeholder {
	color: #999;
	font-size: 32upx;
}

/* 工具栏 */
.post-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20upx 30upx;
	border-top: 1upx solid #f0f0f0;
	background: #ffffff;
}

.toolbar-left {
	display: flex;
	align-items: center;
}

.emoji-btn {
	display: flex;
	align-items: center;
	gap: 10upx;
	padding: 10upx 20upx;
	border-radius: 20upx;
	background: #f8f9fa;
	color: #666;
	font-size: 28upx;
}

.emoji-btn .cuIcon-emoji {
	font-size: 32upx;
	color: #3cc9a4;
}

.emoji-text {
	font-size: 26upx;
}

.toolbar-right {
	display: flex;
	align-items: center;
}

.privacy-toggle {
	display: flex;
	align-items: center;
	gap: 20upx;
}

.privacy-label {
	font-size: 26upx;
	color: #666;
}

.privacy-switch {
	transform: scale(0.8);
}

/* 表情面板 */
.emoji-panel {
	background: #ffffff;
	border-radius: 20upx;
	margin-bottom: 20upx;
	overflow: hidden;
}

.emoji-types {
	display: flex;
	background: #f8f9fa;
	padding: 20upx;
	gap: 10upx;
}

.emoji-type-btn {
	padding: 15upx 25upx;
	border-radius: 20upx;
	background: #ffffff;
	color: #666;
	font-size: 26upx;
	text-align: center;
	transition: all 0.3s;
}

.emoji-type-btn.active {
	background: #3cc9a4;
	color: #ffffff;
}

.emoji-grid {
	height: 400upx;
	padding: 20upx;
}

.emoji-list {
	display: flex;
	flex-wrap: wrap;
	gap: 15upx;
}

.emoji-item {
	width: 80upx;
	height: 80upx;
	border-radius: 12upx;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
}

.emoji-item:active {
	transform: scale(0.95);
	background: #eeeeee;
}

.emoji-item image {
	width: 50upx;
	height: 50upx;
}

/* 转发内容 */
.forward-content {
	margin-bottom: 20upx;
}

.forward-card {
	background: #ffffff;
	border-radius: 20upx;
	overflow: hidden;
}

.forward-header {
	padding: 20upx 30upx;
	border-bottom: 1upx solid #f0f0f0;
	background: #f8f9fa;
}

.forward-label {
	font-size: 26upx;
	color: #666;
	font-weight: 500;
}

.forward-body {
	padding: 30upx;
}

.forward-user {
	color: #3cc9a4;
	font-weight: 500;
	font-size: 28upx;
}

.forward-text {
	color: #333;
	font-size: 28upx;
	line-height: 1.6;
}

/* 媒体区域 */
.media-section {
	margin-bottom: 20upx;
}

.section-title {
	padding: 0 10upx 15upx 10upx;
}

.section-title text {
	font-size: 28upx;
	color: #666;
	font-weight: 500;
}

/* 图片上传 */
.image-upload-area {
	background: #ffffff;
	border-radius: 20upx;
	padding: 30upx;
}

.image-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15upx;
}

.image-item {
	position: relative;
	width: calc((100% - 30upx) / 3);
	height: 200upx;
	border-radius: 15upx;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.image-delete {
	position: absolute;
	top: 10upx;
	right: 10upx;
	width: 50upx;
	height: 50upx;
	border-radius: 25upx;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
}

.image-delete .cuIcon-close {
	color: #ffffff;
	font-size: 24upx;
}

.upload-placeholder {
	width: calc((100% - 30upx) / 3);
	height: 200upx;
	border-radius: 15upx;
	border: 2upx dashed #ddd;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10upx;
	background: #fafafa;
	transition: all 0.3s;
}

.upload-placeholder:active {
	border-color: #3cc9a4;
	background: #f0fffe;
}

.upload-placeholder .cuIcon-add {
	font-size: 48upx;
	color: #3cc9a4;
}

.upload-text {
	font-size: 24upx;
	color: #666;
}

/* 视频上传 */
.video-upload-area {
	background: #ffffff;
	border-radius: 20upx;
	padding: 30upx;
}

.video-placeholder {
	width: 100%;
	height: 300upx;
	border-radius: 15upx;
	border: 2upx dashed #ddd;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15upx;
	background: #fafafa;
	transition: all 0.3s;
}

.video-placeholder:active {
	border-color: #3cc9a4;
	background: #f0fffe;
}

.video-placeholder .cuIcon-video {
	font-size: 80upx;
	color: #3cc9a4;
}

.upload-hint {
	font-size: 22upx;
	color: #999;
}

.video-preview {
	position: relative;
	width: 100%;
	height: 300upx;
	border-radius: 15upx;
	overflow: hidden;
}

.preview-video {
	width: 100%;
	height: 100%;
	border-radius: 15upx;
}

.video-delete {
	position: absolute;
	top: 15upx;
	right: 15upx;
	width: 60upx;
	height: 60upx;
	border-radius: 30upx;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
}

.video-delete .cuIcon-close {
	color: #ffffff;
	font-size: 28upx;
}

/* 底部发布按钮 */
.publish-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	padding: 20upx;
	border-top: 1upx solid #f0f0f0;
	z-index: 100;
}

.publish-btn-container {
	padding: 0 20upx;
}

.publish-btn {
	width: 100%;
	height: 90upx;
	border-radius: 45upx;
	background: linear-gradient(135deg, #3cc9a4 0%, #2fb396 100%);
	color: #ffffff;
	font-size: 32upx;
	font-weight: 600;
	border: none;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.publish-btn:active {
	transform: translateY(2upx);
}

.publish-btn::after {
	border: none;
}

/* 小程序端隐私设置 */
.mp-privacy-section {
	background: #ffffff;
	border-radius: 20upx;
	margin: 20upx;
	padding: 30upx;
}

.mp-privacy-section .privacy-toggle {
	justify-content: space-between;
}

/* 响应式适配 */
@media screen and (max-width: 750upx) {
	.image-item,
	.upload-placeholder {
		width: calc((100% - 20upx) / 2);
	}
}

/* 深色模式适配 */
.dark .post-container,
.dark .text-input-section,
.dark .emoji-panel,
.dark .forward-card,
.dark .image-upload-area,
.dark .video-upload-area,
.dark .mp-privacy-section {
	background: #1a1a1a;
}

.dark .post-textarea {
	color: #ffffff;
}

.dark .post-textarea::placeholder {
	color: #666;
}

.dark .post-toolbar {
	border-color: #333;
	background: #1a1a1a;
}

.dark .forward-text,
.dark .section-title text {
	color: #ffffff;
}

.dark .forward-header {
	background: #2a2a2a;
	border-color: #333;
}

.dark .emoji-types {
	background: #2a2a2a;
}

.dark .emoji-type-btn {
	background: #333;
	color: #ccc;
}

.dark .emoji-type-btn.active {
	background: #3cc9a4;
	color: #ffffff;
}

.dark .upload-placeholder,
.dark .video-placeholder {
	background: #2a2a2a;
	border-color: #444;
}

.dark .upload-placeholder:active,
.dark .video-placeholder:active {
	background: #1a3a37;
}
</style>

